<template>
  <div class="root">
    <m-header title="粉丝列表">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content" id="content">
      <div class="list">

        <div class="list-item" v-for="item in fansList">
          <div class="list-item-left">
            <div class="list-item-left-avatar">
              <img class="avatar" :src="item.avatarUrl ? item.avatarUrl : defaultAvatar" @click="link2InfoPage(item.accountId)" />
            </div>
            <div class="list-item-left-title">
              <p class="name">{{item.nickname}}</p>
              <p class="tag">
                <mu-badge class="tag-item-margin" v-for="(tag,index) in item.tagList" :primary="index%2===0" :secondary="index%2===1" :content="tag.content"
                  :key="index" />
              </p>
            </div>
          </div>
          <div class="list-item-right">
            搭讪消费: {{item.friendFund}}
          </div>
        </div>

      </div>

      <mu-infinite-scroll :scroller="scroller" loadingText="正在加载..." :loading="loading" @load="getMyFans(true)" />
      <m-none-data content='还没有粉丝关注你哦' v-if="fansList.length === 0" />

    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import mNoneData from '../components/none-data.vue'
  import defaultAvatar from '../assets/images/default_avatar.png'

  export default {
    components: {
      mHeader,
      mNoneData
    },
    data() {
      return {
        defaultAvatar,
        fansList: [],
        num: 0,
        pageNo: 1,
        loading: false,
        hasMore: true,
        scroller: null
      }
    },
    methods: {
      getMyFans(isLoadMore) {
        if (isLoadMore) {
          console.log('LoadMore');
          if (!this.hasMore) return;
          this.pageNo++;
          this.loading = true;
        }

        var _this = this;
        this.$http.get('my/fans', {
          params: {
            page: _this.pageNo
          }
        }).then(
          function (response) {
            if (response.data.code === '0') {
              //合并数组
              _this.fansList = _this.fansList.concat(response.data.data.fansList);
              _this.num += response.data.data.fansList.length;

              if (response.data.data.fansList.length < 10) {
                _this.hasMore = false;
              }
              if (isLoadMore) {
                _this.loading = false;
              }
            }
            console.log(_this.fansList);
          }
        );
      },

      link2InfoPage(_accountId) {
        this.$router.push({
          name: 'UserInformation',
          params: {
            accountId: _accountId
          }
        });
      },
    },
    mounted() {
      this.scroller = document.getElementById('content');
      this.getMyFans(false);
    }
  }

</script>

<style lang="less">
  /*@import "../assets/less/common.less";*/

</style>
